﻿@model WebMobile.Models.PhotoDetailViewModel
           
<div class="art-post">
    <div class="art-post-tl"></div>
    <div class="art-post-tr"></div>
    <div class="art-post-bl"></div>
    <div class="art-post-br"></div>
    <div class="art-post-tc"></div>
    <div class="art-post-bc"></div>
    <div class="art-post-cl"></div>
    <div class="art-post-cr"></div>
    <div class="art-post-cc"></div>
    <div class="art-post-body">
    <div class="art-post-inner art-article">

    <!-- tabbed -->
        <div style="width: 878px;">
            <div id="Image" style="width: 878px; text-align: center; min-height: 100px;">
                <img src="http://www.bing.com/fd/hpk2/RenaultAubevoye_ROW1880835276.jpg" alt="" width="855px" style="margin-bottom: 0px;" />
            </div>
            <div>
                <ul style="margin-top: 0px; margin-bottom: 0px;">
                    <li style="float: left"><img src="@Href("~/Images/Map.png")" height="13px" style="margin: 0px;" /></li>
                    <li style="float: left"><img src="@Href("~/Images/Like.png")" id="likeImage" height="13px" style="margin: 0px; cursor: hand;" /></li></ul>
                    <li style="float: left" id="like">(2)</li>
                    <li style="float: left"><img src="@Href("~/Images/Dislike.png")"  id="dislikeImage" height="13px" style="margin: 0px;" /></li></ul>
                    <li style="float: left" id="dislike">(3)</li>
            </div>
            <div class="cleared"></div>
            <div id="title" style="margin: 10px; width: 860px;">
               
            </div>
            <div id="comment-border" style="margin: 10px; width: 860px; border: 1px solid #CCCCCC;">
                <form method="post" id="post-comment">
                    <input type="hidden" id="userId" name="userId" value="@Model.LoginUser.Id" />
                    <input type="hidden" id="photoId" name="photoId" value="@Model.Id" />
                    <textarea  id="comment-post" name="comment" style="width: 850px; height: 20px; border: 0px solid #CCCCCC; overflow: hidden" rows="2"></textarea>
                    <div style="text-align: right; margin: 1px;"><span class="submit_loading_image" id="submit_loading_image"></span><input type="button" value="post" id="post-comment-button" style="border: 1px solid #CCCCCC;" /></div>
                </form>
            </div>
            <div style="width: 860px;">
                <ul id="comment">
                </ul>
            </div>
        </div>
        
        <script>

            $("#post-comment").ajaxForm({
                url: POST_COMMENT, // or whatever 
                success: PostCommentComplete
            });

            LoadPhotoDetail('@Model.Id');
            GetComment('@Model.Id');

            $("#likeImage").click(function () {
                like('@Model.Id');
            });

            $("#dislikeImage").click(function () {
                dislike('@Model.Id');
            });

            $("#post-comment-button").click(function () {
                submitForm();
            });

        </script>

        </div>
            <div class="cleared">
            </div>
        </div>
        <div class="cleared">
        </div>
    </div>
</div>
@section Footer {
    
}
@section HeaderScript {
    
}
